<template>
    <el-pagination :hide-on-single-page="totalPage<2" background @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" @prev-click="prevClick" @next-click="nextClick"
                   :current-page.sync="pageIndex" :page-size.sync="pageSize" :page-sizes.sync="pageSizes"
                   :pager-count.sync="pagerCount"
                   :layout.sync="defaultLayout" :page-count.sync="totalPage"
                   :total.sync="totalNumber">
        <div class="inline-block" v-if="defaultLayout.indexOf('slot')>=0">
                <span class="el-pagination__jump">
                    到第
                    <div class="el-pagination__editor is-in-pagination">
                        <el-input type="number" autocomplete="off" min="1" max="3"
                                  v-model="currentPage" @blur="handleInput(currentPage)" size="small">

                        </el-input>
                    </div>
                    页
                    <el-button type="primary" size="small" class="btn-sure" @click="handleBtnClick">确定</el-button>
                </span>
            <!--<span class="el-pagination__jump">-->
            <!--到第-->
            <!--<div class="el-input el-pagination__editor is-in-pagination">-->
            <!--<input type="number" autocomplete="off" min="1" max="3" class="el-input__inner"-->
            <!--v-model="currentPage" @blur="handleInput(currentPage)">-->
            <!--</div>-->
            <!--页-->
            <!--<el-button type="primary" class="el-pagination__jumpButton" @click="handleInputClick">确定</el-button>-->
            <!--</span>-->
        </div>
        <slot></slot>
    </el-pagination>
</template>

<script>
    export default {
        name: '',
        props: ['data', 'layout'],
        data() {
            return {
                pageIndex: 1, // 当前页（必传）
                pageSize: 10, // 每页多少条
                pageSizes: [], // 每页多少条集合
                currentPage: 1, // 前往第几页
                totalNumber: 0, // 总条数
                totalPage: 0, // 总页数,
                defaultLayout: '->, prev, pager, next, slot',
                pagerCount: 5
            }
        },
        watch: {
            data() {
                this.init()
            }
        },
        mounted() {
            this.init()
            if (this.layout) this.defaultLayout = this.layout
        },
        methods: {
            init() {
                if (this.data) {
                    let data = this.data
                    this.totalNumber = data.total
                    this.pageSize = data.size
                    this.pageSizes.push(data.size)
                    this.pageIndex = data.current
                    this.totalPage = data.pages
                }
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.pageSize = []
                this.pageSizes.push(val)
                // this.totalPage = Math.ceil(this.totalNumber / val)
            },
            handleCurrentChange(val) {
                this.$emit('jumpPage', val)
            },
            prevClick(val) {
                // this.$emit('jumpPage', val)
            },
            nextClick(val) {
                // this.$emit('jumpPage', val)
            },
            handleInput(val) {
                this.currentPage = val ? (val > this.totalPage) ? this.totalPage : val : 1
            },
            handleBtnClick() {
                // this.pageIndex = Number(this.currentPage)
                this.$emit('jumpPage', this.currentPage)
            }
        },
        components: {}

    }
</script>

<style scoped lang="less">
    /*.el-pagination__jumpButton {*/
    /*margin: 0 4px;*/
    /*background-color: #409EFF;*/
    /*border-color: #409EFF;*/
    /*&:active, &:hover {*/
    /*color: #fff;*/
    /*}*/
    /*}*/
    .el-pagination {
        span:not([class*=suffix]) {
            font-size: .14rem;
            line-height: .3rem;
            height: .3rem;
            line-height: .3rem;
            .el-pagination__editor {
                width: .5rem;
                height: .3rem;
                line-height: .3rem;
                display: inline-block;
            }
        }
    }

    .btn-sure {
        margin: 0 4px;
        background-color: #409EFF;
        border-color: #409EFF;
        &:active, &:hover {
            color: #fff;
        }
        span {

        }
    }
</style>
